
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 考试管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">考试管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="student?action=profile">个人信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="exam?action=list">在线考试</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="score?action=list">成绩查询</a>
                </li>
            </ul>
            <span class="navbar-text me-3">
                    欢迎, ${student.studentName} (${student.studentId})
                </span>
            <a href="student?action=logout" class="btn btn-outline-light">退出登录</a>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">个人中心</h5>
                    <div class="list-group">
                        <a href="student?action=profile" class="list-group-item list-group-item-action active">个人信息</a>
                        <a href="#updateInfoModal" class="list-group-item list-group-item-action" data-bs-toggle="modal">修改个人信息</a>
                        <a href="#updatePasswordModal" class="list-group-item list-group-item-action" data-bs-toggle="modal">修改密码</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-header bg-light">
                    <h5 class="card-title">个人信息详情</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                        <tr>
                            <th width="15%">学号:</th>
                            <td>${student.studentId}</td>
                        </tr>
                        <tr>
                            <th>姓名:</th>
                            <td>${student.studentName}</td>
                        </tr>
                        <tr>
                            <th>性别:</th>
                            <td>${student.gender == '1' ? '男' : '女'}</td>
                        </tr>
                        <tr>
                            <th>班级:</th>
                            <td>${student.className}</td>
                        </tr>
                        <tr>
                            <th>学院:</th>
                            <td>${student.department}</td>
                        </tr>
                        <tr>
                            <th>专业:</th>
                            <td>${student.major}</td>
                        </tr>
                        <tr>
                            <th>电话:</th>
                            <td>${student.phone}</td>
                        </tr>
                        <tr>
                            <th>邮箱:</th>
                            <td>${student.email}</td>
                        </tr>
                        <tr>
                            <th>注册时间:</th>
                            <td>${student.createTime}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改个人信息模态框 -->
<div class="modal fade" id="updateInfoModal" tabindex="-1" aria-labelledby="updateInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateInfoModalLabel">修改个人信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <form id="updateInfoForm" action="student" method="post">
                <input type="hidden" name="action" value="updateInfo">
                <input type="hidden" name="studentId" value="${student.studentId}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="className" class="form-label">班级</label>
                        <input type="text" class="form-control" id="className" name="className" value="${student.className}" required>
                    </div>
                    <div class="mb-3">
                        <label for="department" class="form-label">学院</label>
                        <input type="text" class="form-control" id="department" name="department" value="${student.department}" required>
                    </div>
                    <div class="mb-3">
                        <label for="major" class="form-label">专业</label>
                        <input type="text" class="form-control" id="major" name="major" value="${student.major}" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">电话</label>
                        <input type="text" class="form-control" id="phone" name="phone" value="${student.phone}" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" value="${student.email}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="updatePasswordModal" tabindex="-1" aria-labelledby="updatePasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updatePasswordModalLabel">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <form id="updatePasswordForm" action="student" method="post">
                <input type="hidden" name="action" value="updatePassword">
                <input type="hidden" name="studentId" value="${student.studentId}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="oldPassword" class="form-label">原密码</label>
                        <input type="password" class="form-control" id="oldPassword" name="oldPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认新密码</label>
                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">修改密码</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // 修改个人信息表单提交
        $('#updateInfoForm').submit(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'student',
                data: $(this).serialize(),
                success: function(result) {
                    if (result.success) {
                        alert('信息修改成功');
                        window.location.href = 'student?action=profile';
                    } else {
                        alert(result.message);
                    }
                },
                error: function() {
                    alert('修改失败，请稍后再试');
                }
            });
        });

        // 修改密码表单验证
        $('#updatePasswordForm').submit(function(e) {
            e.preventDefault();
            var oldPassword = $('#oldPassword').val();
            var newPassword = $('#newPassword').val();
            var confirmPassword = $('#confirmPassword').val();

            if (newPassword != confirmPassword) {
                alert('两次输入的新密码不一致');
                return;
            }

            $.ajax({
                type: 'POST',
                url: 'student',
                data: $(this).serialize(),
                success: function(result) {
                    if (result.success) {
                        alert('密码修改成功，请重新登录');
                        window.location.href = 'student?action=logout';
                    } else {
                        alert(result.message);
                    }
                },
                error: function() {
                    alert('修改失败，请稍后再试');
                }
            });
        });
    });
</script>
</body>
</html>